jQuery fadeToggle ()
The jQuery fadeToggle() method is used to toggle between the fadeIn() and
fadeOut() methods.
It allows elements to fade in if they are hidden, or fade out if they are
visible.
Syntax
$(selector).fadeToggle(speed, easing, callback);
- speed (optional): Specifies the duration of the effect. Can be slow, fast, or a number of milliseconds (e.g., 400).
- easing (optional): Specifies the easing function for the transition. Default is swing, and another option is linear.
- callback (optional): A function to be executed once the toggle animation is complete.
<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeToggle()
Example</title>
<style>
#box {
width: 300px;
height: 150px;
background-color: red;
display: block;
}
</style>
</head>
<body>
<button id="toggleBox">Toggle Box Fade</button>
<div id="box"></div>
<script>
$(document).ready(function() {
$("#toggleBox").click(function() {
$("#box").fadeToggle(1500,
'linear', function() {
alert("The box
has been toggled!");
});
});
});
</script>
</body>
</html>
